<template>
  <div>
    <a href="/">返回首页</a>
    <br />
    <h1>作业——足球队的增删改查(客户端版)</h1>
  </div>

  <!-- 数据loading部分 -->
  <div v-loading="loading">
    <!-- 搜素部分 -->
    <div class="search">
      <el-form :inline="true">
        <!-- 下拉列表 -->
        <el-form-item>
          <el-select
            v-model="searchData.orderBy"
            style="width: 10rem"
            size="large"
          >
            <el-option value="1" label="粉丝数"></el-option>
            <el-option value="2" label="联赛冠军数"></el-option>
            <el-option value="3" label="杯赛冠军数"></el-option>
            <el-option value="4" label="俱乐部创建时间"></el-option>
          </el-select>
        </el-form-item>
        <!-- 搜索框1 -->
        <el-form-item>
          <el-input
            v-model="searchData.tname"
            placeholder="球队名称模糊查询"
            size="large"
          ></el-input>
        </el-form-item>
        <!-- 搜索框2 -->
        <el-form-item>
          <el-input
            v-model="searchData.league"
            placeholder="所属联赛模糊查询"
            size="large"
          ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="danger" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据展示部分 -->
    <div class="info">
      <div v-for="d in list" :key="d.ftid">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>{{ d.ftid }}</span>
              <span @click="showInfo(d.ftid)">{{ d.tname }}</span>
            </div>
          </template>

          <div class="card-body">
            <div>
              <div>
                <span>所属联赛:</span> <span>{{ d.league }}</span>
              </div>
              <div>
                <span>杯赛冠军数:</span> <span>{{ d.cups }}</span>
              </div>
              <div>
                <span>进球纪录:</span> <span>{{ d.goals }}</span>
              </div>
            </div>
            <div>
              <div>
                <span>联赛冠军数:</span> <span>{{ d.champions }}</span>
              </div>
              <div>
                <span>粉丝数(万):</span> <span> {{ d.fans }}</span>
              </div>
              <div>
                <span>进球纪录保持者:</span> <span>{{ d.gname }}</span>
              </div>
            </div>
          </div>

          <template #footer>
            <div class="card-footer">
              <span>创建时间:</span>
              {{ tools.formatDate(d.created) }}
            </div></template
          >
        </el-card>
      </div>
    </div>

    <!-- 分页部分 -->
    <div>
      <el-pagination
        v-model:current-page="page.pageNumber"
        :page-size="page.pageSize"
        :total="page.total"
        layout="prev, pager, next ,total"
        @current-change="query"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { api } from '../../js/ajax'
import { tools } from '../../js/tools'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const loading = ref(false)
const router = useRouter()

//#region 数据获取

// 搜索部分所需的数据
const searchData = ref({
  orderBy: '1',
  tname: '',
  league: '',
})

// 查询功能
const search = () => {
  page.value.pageNumber = 1
  query()
}

// 重置功能
const reset = () => {
  page.value.pageNumber = 1
  searchData.value = {
    orderBy: '1',
    tname: '',
    league: '',
  }
  query()
}

// 页面信息
const page = ref({
  pageSize: 5,
  pageNumber: 1,
})

// 数据列表
const list = ref([])

// 跳转页面
const showInfo = ftid => {
  router.push({
    path: '/crud/WorkFootballInfo',
    query: { ftid: ftid },
  })
}

// 获取数据
const query = () => {
  loading.value = true
  api.get(
    '/crud/footballteam',
    tools.mergeJson(searchData.value, page.value),
    data => {
      setTimeout(() => {
        loading.value = false
      }, 50)
      if (data.success) {
        list.value = data.data.data
        page.value = data.data.pageBean
        return
      }
      ElMessageBox.alert(data.message, '足球队管理')
    },
  )
}
query()

//#endregion
</script>

<style scoped>
/* 搜索部分样式 */
.search {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}

/* 卡片排列的样式 */
.info {
  display: flex;
  flex-wrap: wrap;
}
.info > div {
  margin: 1rem;
  width: calc(33vw - 3rem);
}

/* 卡片中球队名称的样式 */
.card-header > span:last-of-type {
  margin-left: 1rem;
  font-size: 1.2em;
  color: blue;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: blue;
}
.card-header > span:last-of-type:hover {
  cursor: pointer;
}

/* 卡片中头尾编号和创建时间的样式 */
.card-header > span:first-of-type,
.card-footer {
  color: #999;
  font-size: 0.8em;
}

/* 卡片中内容的排列样式 */
.card-body {
  display: flex;
  justify-content: space-around;
}
.card-body > div > div {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.card-body > div > div > span {
  margin: 0.3rem;
}
.card-body > div > div > span:first-of-type {
  color: #3b3b3b;
  font-size: 0.8em;
}

/* 分页的样式 */
.el-pagination {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
</style>
